<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>旅游网后台管理</title>
	<meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
       <link rel="stylesheet" href="css/colorpicker.css" />
       <link rel="stylesheet" href="css/datepicker.css" />
	<link rel="stylesheet" href="css/uniform.css" />
	<link rel="stylesheet" href="css/select2.css" />		
	<link rel="stylesheet" href="css/unicorn.main.css" />
	<link rel="stylesheet" href="css/unicorn.grey.css" class="skin-color" />
	
	<script src="${pageContext.request.contextPath}/back/js/jquery-3.5.1.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/jquery.ui.custom.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/jquery.min.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/bootstrap.min.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/bootstrap-colorpicker.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/bootstrap-datepicker.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/jquery.uniform.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/select2.min.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/unicorn.js"></script>
       <script src="${pageContext.request.contextPath}/back/js/unicorn.form_common.js"></script>
	<script src="${pageContext.request.contextPath}/back/js/unicorn.tables.js"></script>
	<script src="${pageContext.request.contextPath}/back/js/jquery.dataTables.min.js"></script>	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<!-- header part -->
	<div id="header">
		<h1><a href="./dashboard.html">Unicorn Admin</a></h1>		
	</div>
	
	<!-- <div id="search">
		<input type="text" placeholder="Search here..." /><button type="submit" class="tip-right" title="Search"><i class="icon-search icon-white"></i></button>
	</div> -->
	<div id="user-nav" class="navbar navbar-inverse">
         <ul class="nav btn-group">
             <li class="btn btn-inverse">
				<a title="" href="#"><i class="icon icon-user"></i><span class="text">欢迎进入！管理员： ${sessionScope.admin.adminName}</span></a>
            </li>
			
			<li class="btn btn-inverse">
				<a title="" href="login.jsp"><i class="icon icon-share-alt"></i> <span class="text">退出</span></a>
			</li>
         </ul>
    </div>
           
	<div id="sidebar">
		<a href="#" class="visible-phone"><i class="icon icon-home"></i>
			Dashboard</a>
		<ul>
			<li><a href="index.jsp"><i class="icon icon-th-list"></i>
					<span>首页</span> </a>
			</li>
			<li ><a href="userManage.jsp"><i class="icon icon-th-list"></i> <span>用户管理</span></a></li>
			
			<li class="submenu">
					<a href="#"><i class="icon icon-th-list"></i> <span>景点管理</span> <span class="label">2</span></a>
					<ul>
						<li><a href="insertScenic.jsp">新增景点</a></li>
						<li><a href="findAllScenic.jsp">维护景点信息</a></li>
						
					</ul>
				</li>
				
			<li class="submenu"><a href="#"><i class="icon icon-th-list"></i>
					<span>酒店管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="insert-hotel.jsp">
							<span>新增酒店</span></a></li>
					<li><a href="hotel-management.jsp">
							<span>维护酒店信息</span></a></li>
				</ul>
			</li>
			<li class="submenu active open">
				<a href="#"><i class="icon icon-th-list"></i> <span>客房管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="room-management.jsp">维护客房信息</a></li>
					<li  class="active"><a href="insert-room.jsp">新增客房</a></li>
				</ul>
			</li>
			<li class="submenu"><a href="#"><i class="icon icon-th-list"></i>
					<span>评论管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="hotel-comment.jsp">
							<span>大众点评酒店</span></a></li>
					<li><a href="scenic-comment.jsp">
							<span>大众点评景点</span></a></li>
				</ul>
			</li>
			<li class="submenu"><a href="#"><i class="icon icon-th-list"></i>
					<span>订单管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="findAllHotelOrder.jsp">
							<span>酒店订单</span></a></li>
					<li><a href="findAllScenicOrder.jsp">
							<span>景点门票订单</span></a></li>
				</ul>
			</li>

		</ul>
	
	</div>
	
	<div id="style-switcher">
		<i class="icon-arrow-left icon-white"></i>
		<span>Style:</span>
		<a href="#grey" style="background-color: #555555;border-color: #aaaaaa;"></a>
		<a href="#blue" style="background-color: #2D2F57;"></a>
		<a href="#red" style="background-color: #673232;"></a>
	</div>
	
	<div id="content">
		<div id="content-header">
			<h1>客房管理</h1>
			<!-- <div class="btn-group">
				<a class="btn btn-large tip-bottom" title="Manage Files"><i class="icon-file"></i></a>
				<a class="btn btn-large tip-bottom" title="Manage Users"><i class="icon-user"></i></a>
				<a class="btn btn-large tip-bottom" title="Manage Comments"><i class="icon-comment"></i><span class="label label-important">5</span></a>
				<a class="btn btn-large tip-bottom" title="Manage Orders"><i class="icon-shopping-cart"></i></a>
			</div> -->
		</div>
		<div id="breadcrumb">
			<a href="#" class="tip-bottom"><i class="icon-home"></i>Home</a>
			<a href="#" class="current">客房管理 </a>
			<a href="#" class="current">新增客房 </a>
		</div>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="widget-box">
						
						<!-- 表格头 -->
						<div class="widget-title">
							
						</div>
						
						<!-- 表格内容 -->
						<div class="widget-content nopadding">
							<form method="post" action="${pageContext.request.contextPath}/RoomServlet" enctype="multipart/form-data" class="form-horizontal">

								<!--  隐藏域 -->
								<input type="hidden" name="op" value="insertRoom" />
								<input type="hidden" id="hotelId" name="hotelId" value="" />
								<input type="hidden" id="roomTypeId" name="roomTypeId" value="">
								
								<div class="control-group" style="padding-top: 10px;">
									<label for="hotelName" class="control-label">酒店名称</label>
									<div class="controls" style="width:166px;">
										<!-- <input style="width:166px;" type="text" id="hotelName" name="hotelName"> -->
										<select id="hotelName" name="hotelName">
											<option>请选择酒店</option>
										</select>
									</div>
								</div>

								<div class="control-group" style="padding-top: 10px;">
									<label for="roomType" class="control-label">客房类别</label>
									<div class="controls">
										<!-- <input style="width:166px;" type="text" id="hotelPhone" name="hotelPhone"> -->
										<select id="roomType" name="roomType">
											<option>请选择房间类型</option>
										</select>
									</div>
								</div>
								
								<div class="control-group" style="padding-top: 10px;">
									<label for="roomName" class="control-label">客房名称</label>
									<div class="controls">
										<input style="width:166px;" type="text" id="roomName" name="roomName">
									</div>
								</div>
								
								<div class="control-group" style="padding-top: 10px;">
									<label for="hotelPhone" class="control-label">客房价格</label>
									<div class="controls">
										<input style="width:166px;" type="text" id="roomPrice" name="roomPrice">
									</div>
								</div>
								
								<div class="control-group" style="padding-top: 10px;height:100px;">
									<div class="userImage" style="width:100px;height:100px; margin-left:205px;margin-bottom:20px;" >
										<img src="${pageContext.request.contextPath}/back/img/preview-img.jpg" id="preview-img" />
									</div>
								</div>
								
								
								<div class="control-group" style="padding-top: 10px;">
									<label class="control-label">客房图片</label>
									<div class="controls">
										<label for="roomPicture" class="btn btn-default">选择图片</label>
	       								<span style="display:none">
	       									<input id="roomPicture" name="roomPicture" type="file" accept="image/jpg,image/jpeg,image/png,image/gif">
	       								</span>
									</div>
								</div>
								
								<!-- 表格尾 -->
								<div class="widget-title">
									
								
								</div>
								<div class="form-actions" style="margin-left:22px;">
									<button id="insert-btn" type="submit" class="btn btn-primary" style="font-size:20px">点击新增客房</button>
								</div>
							</form>
						</div>
						
						
					</div>
				</div>
			</div>
			
		<div class="row-fluid">
			
		</div>

		<div class="row-fluid">
			<div id="footer" class="span12">
				2020 &copy; Travel Admin.
			</div>
		</div>
	</div>
	
<script type="text/javascript">

	window.onload=function(){
		
	}

	// 点击事件	
	$("#insert-btn").click(function(){
		var hotelIdValue = document.getElementById("hotelName").value;
		var roomTypeValue = document.getElementById("roomType").value;
		
		console.log("hotelIdValue" + hotelIdValue);
		console.log("roomTypeValue" + roomTypeValue);
		
		$("#hotelId").val(hotelIdValue);
		$("#roomTypeId").val(roomTypeValue);
	});

	//头像选择做改变事件
	$("#roomPicture").change(function(){
		// 生成图片预览功能
		// 1.得到文件列表数组,获取数组中第一个文件
		var imgFile = this.files[0];
	
		// 判断是否有上传文件
		if(imgFile==null){	
			$("#preview-img").prop("src","${pageContext.request.contextPath}/back/img/preview-img.jpg");			
		}else{
			// 正则表达式验证选择的是否是图片类型
			var regexImageFilter = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg)$/i;
			if (!regexImageFilter.test(imgFile.type)) {
				 alert("请选择有效图片");
				 $("#roomPicture").val("");
			}else{ 
				// 2.构建文件读取流对象
				var fileReader =  new FileReader();
				// 3.利用流对象获取文件内容
				fileReader.readAsDataURL(imgFile);
				// 4.加载事件
				fileReader.onload = function(){
					// 5.渲染头像预览框
					$("#preview-img").prop("src",this.result); // this.result从文件读取流对象中获取数据
				}
			 } 
		}
	});
	
	$(document).ready(function(){
		initHotelSelect();
		initRoomTypeSelect();
	});
	
	
	// 渲染酒店名称选择框内数据的方法
	function initHotelSelect(){
		$.ajax({
			async:true,
			url:"${pageContext.request.contextPath}/RoomServlet",
			type:"get",
			data:{
				op:"initHotelSelct"
			},
			dataType:"json",
			success:function(result){
				console.log(result.length);
				 
				
				 
				if(result.length != "" && result.length != null){
					 
					 for(var i = 0 ; i < result.length; i++){
							console.log(result[i].roomTypeId);
							console.log(result[i].roomTypeName);
							
							$("#hotelName").append("<option value='"+result[i].hotelId + "'" + ">"+result[i].hotelName+"</option>"); 
						}
				 }
			},
			error:function(){
				alert("init select fail");
			}
		});
	}
	
	// 渲染客房类别选择框内数据的方法
	function initRoomTypeSelect(){
		$.ajax({
			async:true,
			url:"${pageContext.request.contextPath}/RoomServlet",
			type:"get",
			data:{
				op:"initRoomTypeSelct"
			},
			dataType:"json",
			success:function(result){
				console.log(result.length);

				if(result.length != "" && result.length != null){
					 
					 for(var i = 0 ; i < result.length; i++){
							console.log(result[i].hotelId);
							console.log(result[i].hotelName);
							
							$("#roomType").append("<option value='"+result[i].roomTypeId + "'" + ">"+result[i].roomTypeName+"</option>"); 
						}
				 }
			},
			error:function(){
				alert("init select fail");
			}
		});
	}
</script>
</body>
</html>
